<template>
  <div>
    <i-vxe-table ref="iVxeTableRef" :tableData="tableData">
      <template #menuCode_template="{ obj }">
        <template v-if="obj.children">
          <svg class="icon-sm" aria-hidden="true" v-if="iVxeTableRef.isTreeExpandByRow(obj)">
            <use xlink:href="#iconjian1" />
          </svg>
          <svg class="icon-sm" aria-hidden="true" v-else>
            <use xlink:href="#iconjia1" />
          </svg>
        </template>
        <span>{{obj.id}}</span>
      </template>
    </i-vxe-table>
    <lib-doc :libDocData="libDocData"></lib-doc>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { IVxeTable } from 'wd-platform-library'
import {
    TableDataInterFace,
    PageInfoInterFace,
    ResultInterFace
} from 'wd-platform-library/lib/src/IVxeTable/src/IVxeTableInterFace'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
interface AppResult {
  id: string;
  appDesc: string;
  appId: string;
  appName: string;
  appSecret: string;
  iconPath: string;
  status: string;
  verify: string;
}
export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const iVxeTableRef = ref()
        const dataList = [
            {
                id: 10891065345474561,
                menuName: '权限管理',
                children: [
                    {
                        id: 10948510534696991,
                        menuName: '角色管理'
                    },
                    {
                        id: 10948510534697001,
                        menuName: '菜单管理'
                    },
                    {
                        id: 10948510534697011,
                        menuName: '用户管理'
                    },
                    {
                        id: 10948510534697021,
                        menuName: '资源管理'
                    },
                    {
                        id: 10948510534697031,
                        menuName: '资源组管理'
                    }
                ]
            },
            {
                id: 10948510534696971,
                menuName: '系统管理',
                children: [
                    {
                        id: 10948510534697041,
                        menuName: '应用管理'
                    },
                    {
                        id: 1094851053469705,
                        menuName: '机构管理'
                    }
                ]
            }
        ]
        const tableData = reactive<TableDataInterFace>({
            type: 'app_table', // 每个表格唯一表示符
            tableInfo: {
                columns: [
                    {
                        field: 'id',
                        minWidth: 80,
                        treeNode: true,
                        title: 'ID',
                        slots: {
                            default: 'menuCode_template'
                        }
                    },
                    {
                        field: 'menuName',
                        minWidth: 140,
                        title: '菜单名称'
                    }

                ], // 表头配置
                data: [], // 数据集合
                treeConfig: {
                    expandAll: true,
                    iconOpen: 'fa fa-minus-square-o',
                    iconClose: 'fa fa-plus-square-o',
                    trigger: 'cell'
                }
            },
            callback: async (pageInfo: PageInfoInterFace) => {
                return {
                    resultList: dataList,
                    total: 10
                } as ResultInterFace<AppResult>
            },
            authControl: {
                toolbarCustom: false // 展示自定义
            }
        })
        const libDocData: LibDocInterface = {
            title: '自定义表格组件',
            docList: [
                {
                    label: '引入组件',
                    value: "import { IVxeTable } from 'wd-platform-library'"
                },
                {
                    label: '创建表格对象',
                    type: 'pre',
                    value: `
    const tableData = reactive<TableDataInterFace>({
            type: 'app_table', // 每个表格唯一表示符
            tableInfo: {
                columns: [
                    {
                        field: 'id',
                        minWidth: 80,
                        treeNode: true,
                        title: 'ID',
                        slots: {
                            default: 'menuCode_template'
                        }
                    },
                    {
                        field: 'menuName',
                        minWidth: 140,
                        title: '菜单名称'
                    }

                ], // 表头配置
                data: [], // 数据集合
                treeConfig: {
                    expandAll: true,
                    iconOpen: 'fa fa-minus-square-o',
                    iconClose: 'fa fa-plus-square-o',
                    trigger: 'cell'
                }
            },
            callback: async (pageInfo: PageInfoInterFace) => {
                return {
                    resultList: dataList,
                    total: 10
                } as ResultInterFace<AppResult>
            },
            authControl: {
                toolbarCustom: false // 展示自定义
            }
    })`
                },
                {
                    label: '关键代码:展示',
                    type: 'pre',
                    value: `
    tableInfo: {
                columns: [
                    {
                        field: 'id',
                        minWidth: 80,
                        treeNode: true,   //该字段表明当前列需要树形展示
                        title: 'ID',
                        slots: {
                            default: 'menuCode_template' //自定义单元格
                        }
                    },
                ], // 表头配置
                data: [], // 数据集合
                treeConfig: {  //树形展示配置
                    expandAll: true,  //是否全部展开
                    iconOpen: 'fa fa-minus-square-o', //展开图标
                    iconClose: 'fa fa-plus-square-o', //关闭图标
                    trigger: 'cell' // 展开和收起方式cell:点击单元格收起/关闭
                }
            }`
                },
                {
                    label: '自定义树形单元格',
                    type: 'pre',
                    value: `
    //v-if="iVxeTableRef.isTreeExpandByRow(obj)"
    //该方法判断当前树是展开/收起    
   <template #menuCode_template="{ obj }">
        <template v-if="obj.children">
          <svg class="icon-sm" aria-hidden="true" v-if="iVxeTableRef.isTreeExpandByRow(obj)">
            <use xlink:href="#iconjian1" />
          </svg>
          <svg class="icon-sm" aria-hidden="true" v-else>
            <use xlink:href="#iconjia1" />
          </svg>
        </template>
        <span>{{obj.id}}</span>
      </template>`
                }
            ]
        }
        return {
            tableData,
            iVxeTableRef,
            libDocData
        }
    },
    components: {
        IVxeTable,
        LibDoc
    }
})
</script>

<style lang="scss" scoped>
.icon-sm   {
    margin-right: 0.16rem;
    width: 0.16rem;
    height: 0.16rem;
    margin-left: -0.2rem;
    vertical-align: -0.25em;
    cursor: pointer;
}
</style>
